<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>有声相册</title>
    <link rel="stylesheet" href="../static/css/base.css" />
    <link rel="stylesheet" href="../static/css/album.css" />
    <link rel="icon" href="../static/favicon.ico" />
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/socket.io/4.4.1/socket.io.min.js"></script>
</head>

<body>
    <div class="header" role="banner" aria-label="页眉">
        有声相册
        <div id="album-add" role="contentinfo" aria-label="添加照片">
            <button id="addButton" aria-label="添加照片">&#10010;</button>
            <button id="cameraButton" aria-label="从摄像头获取照片" style="display: none;">从摄像头获取</button>
            <button id="albumButton" aria-label="从相册获取照片" style="display: none;">从相册获取</button>
            <input type="file" id="fileInput" accept="image/*" capture="camera" aria-label="选择图片文件" style="display: none;">
        </div>
    </div>
    <div id="imageDetail"></div>
    <audio id="audioPlayer" controls style="display: none;"></audio>
    <div class="gallery" id="gallery" role="region" aria-label="照片画廊"></div>

    <div id="statusMessage" role="alert" aria-live="assertive"></div>

    <div id="navbar" role="navigation">
        <a href="/agent" aria-label="首页">
          <span>首页</span>
        </a>
        <a href="/chat" aria-label="消息">
          <span>消息</span>
        </a>
        <a href="/album" aria-label="有声相册">
          <span>相册</span>
        </a>
        <a href="/skills" aria-label="能力">
          <span>能力</span>
        </a>
        <a href="/mine" aria-label="我的">
          <span>我的</span>
        </a>
    </div>
    <script src="../static/js/album.js"></script>
</body>

</html>